<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.5.5/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.5.5/themes/icon.css">
	<script type="text/javascript" src="../jquery-easyui-1.5.5.5/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.5.5/jquery.easyui.min.js"></script>
    <style>
        .l-btns{
            position: fixed;
            left:20px;
            top:50px;
            padding: 0;
        }
        .l-btns li{
            list-style: none;
            padding:  8px 0;
        }
    </style>
</head>

<body>

        <ul class="l-btns">
            <li> <a href="#" id="addData" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a></li>
            <li> <a href="#" id="removeData" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a></li>
            <li> <a href="#" id="editData" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改</a></li>
        </ul>

        <div style="margin: 0 0 20px 100px">
            <a id="xw" style="margin-right:15px" href="#" class="easyui-linkbutton" >新闻</a>
            <a id="cp" style="margin-right:15px" href="#" class="easyui-linkbutton" >产品</a>
        </div>

        <ul id="tt" style="margin-left: 100px;width: 300px;"></ul>

        <div id="dlg" class="easyui-dialog" title="数据操作" data-options="closed:true,iconCls:'icon-save',modal:true" style="width:200px;height:200px;padding:10px">
            <form id="ff" method="post">
                <input type="hidden" name="_id" style="width:100%">
                <div style="margin-bottom:20px">
                    <input id="addname" class="easyui-textbox" name="name" style="width:100%" data-options="label:'分类名称:',required:true">
                </div>
    
            </form>
            <div style="text-align:center;padding:5px 0">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
            </div>
        </div>
        
        <div id="dlg_edit" class="easyui-dialog" title="数据操作" data-options="closed:true,iconCls:'icon-save',modal:true" style="width:200px;height:200px;padding:10px">
                <form id="ff_edit" method="post">
                    <input type="hidden" name="_id" style="width:100%">
                    <div style="margin-bottom:20px">
                            <input id="editname" class="easyui-textbox" name="name" style="width:100%" data-options="label:'分类名称:',required:true">
                    </div>
        
                </form>
                <div style="text-align:center;padding:5px 0">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm1()" style="width:80px">提交</a>
                </div>
            </div>

</body>

</html>

<script>
    var pid='';
    var ntype=1;
    var nid='';
    var npid='';
    var host='http://10.31.156.62:3000'

    function ctree(){
        $('#tt').tree({
            url: `${host}/cate/list/${ntype}`,
            method: 'post',
            onSelect: function(node){
                pid=node._id;
                nid=node._id;
                npid=node.parentId;
            }
        });
        
        pid='';
        nid='';
        npid='';
    }

    ctree()
    
    

    $('#xw').on('click',function(){
        ntype=1;
        ctree();
    })
    $('#cp').on('click',function(){
        ntype=2;
        ctree();
    })


    $("#addData").click(function () {
        $('#ff').form('clear');
        $('#dlg').dialog('open')
    })

    $("#editData").click(function () {
        if(nid!=''){
            $('#ff_edit').form('clear');
            $('#dlg_edit').dialog('open')
        }else{
            alert('请选择需要修改的分类');
        }
    })

    $("#removeData").click(function () {
        if(nid!=''){
            $.ajax({
                url:`${host}/cate/data/${nid}`,
                type:'delete'
            }).then(res=>{
                console.log(res);
                ctree();
            })
        }else{
            alert('请选择需要删除的分类(组)');
        }
    })

    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {
                    var ntext=$('#addname').val();
                    if(pid!=''){
                        datas={
                            text:ntext,
                            type:ntype,
                            parentId:pid
                        }
                    }else{
                        datas={
                            text:ntext,
                            type:ntype
                        }
                    }
                    $.ajax({
                    url:`${host}/cate/data`,
                    type:'post',
                    data:datas
                    }).then(res=>{
                        $('#dlg').dialog('close')
                        ctree();
                    })

                }
            }
        });
    }

    function submitForm1() {
        $('#ff_edit').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {
                    var ntext=$('#editname').val();
                    
                        if(npid!=null){
                            datas={
                                _id:nid,
                                text:ntext,
                                parentId:npid
                            }
                        }else{
                            datas={
                                _id:nid,
                                text:ntext
                            }
                        }
                    
                    $.ajax({
                        url:`${host}/cate/data/${nid}`,
                        type:'put',
                        data:datas
                    }).then(res=>{
                        $('#dlg_edit').dialog('close')
                        ctree();
                    })

                }
            }
        });
    }
</script>